<template>
    <div class="ewe-mating-list-view">
        <!-- 搜索筛选区域 -->
        <div class="search-section">
            <div class="search-row">
                <div class="search-item">
                    <label>配种日期</label>
                    <div class="date-range">
                        <el-date-picker v-model="page.StartEwematingTime" type="date" placeholder="开始日期" format="YYYY-MM-DD"
                            value-format="YYYY-MM-DD" size="default" />
                        <span class="date-separator">至</span>
                        <el-date-picker v-model="page.EndEwematingTime" type="date" placeholder="结束日期" format="YYYY-MM-DD"
                            value-format="YYYY-MM-DD" size="default" />
                    </div>
                </div>
                <div class="search-item">
                    <label>种母耳号</label>
                    <el-input v-model="page.EwematingSnowId" placeholder="请输入种母耳号" clearable />
                </div>
                <div class="search-item">
                    <label>负责人</label>
                    <el-select v-model="page.ResponsibleFor" placeholder="请选择">
                        <el-option label="海绵宝宝" value="海绵宝宝" />
                        <el-option label="派大星" value="派大星" />
                        <el-option label="蟹老板" value="蟹老板" />
                    </el-select>
                </div>
                <div class="search-actions">
                    <el-button type="primary" @click="handleSearch" :icon="Search">
                        查询
                    </el-button>
                    <el-button @click="handleReset" :icon="Refresh">
                        重置
                    </el-button>
                </div>
            </div>

            <!-- 操作工具栏 -->
            <div class="toolbar-section">
                <div class="toolbar-left">
                    <el-button type="primary" @click="handleAddNew" :icon="Plus">
                        新增
                    </el-button>
                    <!-- <el-button type="danger" @click="handleBatchDelete" :icon="Delete"
                        :disabled="selectedRows.length === 0">
                        删除
                    </el-button> -->
                    <el-button type="success" @click="handleBatchUpdate" :icon="User" :disabled="selectedRows.length === 0">
                        修改
                    </el-button>
                    <el-button type="warning" @click="" :icon="User" :disabled="selectedRows.length === 0">
                        审核
                    </el-button>
                    <div class="selection-info">
                        <el-icon class="info-icon">
                            <InfoFilled />
                        </el-icon>
                        <span>已选择{{ selectedRows.length }}项</span>
                    </div>
                </div>
                <div class="toolbar-right">
                    <el-icon class="toolbar-icon" @click="handleRefresh">
                        <Refresh />
                    </el-icon>
                    <el-icon class="toolbar-icon" @click="handleSettings">
                        <Setting />
                    </el-icon>
                    <el-icon class="toolbar-icon" @click="handleFilter">
                        <Filter />
                    </el-icon>
                    <el-icon class="toolbar-icon" @click="handleMore">
                        <More />
                    </el-icon>
                </div>
            </div>
            <!-- 数据表格区域 - 合并为单行展示 -->
            <div>
                <div class="table-container">
                    <el-table :data="tableData" border stripe style="width: 100%" @selection-change="handleSelectionChange">
                        <el-table-column type="selection" min-width="120" />
                        <el-table-column type="index" label="序号" min-width="120" align="center" />
                        <el-table-column prop="ewematingTime" label="配种日期" min-width="120" />
                        <el-table-column prop="ewematingSnowId" label="耳号" min-width="120" />
                        <el-table-column prop="ewematingFirstpair" label="首配公羊" min-width="120" />
                        <el-table-column prop="ewematingMethod" label="配种方式" min-width="120">
                            <template #default="{ row }">
                                {{ getMatingMethodText(row.ewematingMethod) }}
                            </template>
                        </el-table-column>
                        <el-table-column prop="ewematingEstrus" label="种母发情类型" min-width="140">
                            <template #default="{ row }">
                                {{ getEstrusTypeText(row.ewematingEstrus) }}
                            </template>
                        </el-table-column>
                        <el-table-column prop="ewematingRating" label="首配评分" min-width="100" />
                        <el-table-column prop="ewePoultryhouse" label="当前栋舍" min-width="120" />
                        <el-table-column prop="ewematingField" label="当前栏位" min-width="120" />
                        <el-table-column prop="eweTransferhouse" label="转入栋舍" min-width="120" />
                        <el-table-column prop="ewematingTransfer" label="转入栏位" min-width="120" />
                        <el-table-column prop="reproductiveStatus" label="繁殖状态" min-width="120">
                            <template #default="{ row }">
                                {{ row.reproductiveStatus ? '已怀孕' : '未怀孕' }}
                            </template>
                        </el-table-column>
                        <el-table-column prop="ewematingDateTime" label="事件日期" min-width="120" />
                        <el-table-column prop="ewematingWeight" label="重量(公斤)" min-width="100" />
                        <el-table-column prop="responsibleFor" label="负责人" min-width="120" />
                        <el-table-column prop="documentNumber" label="单据号" min-width="120" />

                        <!-- 操作列 -->
                        <el-table-column label="操作" width="180" fixed="right">
                            <template #default="{ row }">
                                <!-- <el-button type="primary" size="small" @click="handleEdit(row)">编辑</el-button> -->
                                <el-button type="success" size="small" @click="handleUpdate(row)">编辑</el-button>
                                <el-button type="danger" size="small" @click="handleDelete(row)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </div>
            <!-- 分页区域 -->
            <div class="pagination-section">
                <div class="pagination-info">
                    <!-- <span>当前为第{{ pagination.currentPage }}页共{{ pagination.totalPages }}页{{ pagination.total }}条数据</span> -->
                    <el-pagination v-model:current-page="page.pageIndex" v-model:page-size="page.pageSize"
                        :page-sizes="[1, 2, 3, 4]" :size="page.pageSize" :background="page.totalCount"
                        layout="total, sizes, prev, pager, next, jumper" :total="page.totalCount" />
                </div>
            </div>
        </div>
    </div>

    <!-- 修改弹窗 -->
    <el-dialog v-model="editDialogVisible" title="修改配种记录" width="800px" :close-on-click-modal="false"
        :close-on-press-escape="false">

        <el-form :model="editForm" :rules="editRules" ref="editFormRef" label-width="120px">
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="耳号" prop="ewematingSnowId">
                        <el-input v-model="editForm.ewematingSnowId" placeholder="请输入耳号" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="首配公羊" prop="ewematingFirstpair">
                        <el-input v-model="editForm.ewematingFirstpair" placeholder="请输入首配公羊" />
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="配种方式" prop="ewematingMethod">
                        <el-select v-model="editForm.ewematingMethod" placeholder="请选择配种方式">
                            <el-option label="鲜精-阴道" value="鲜精-阴道" />
                            <el-option label="鲜精-子宫角" value="鲜精-子宫角" />
                            <el-option label="冻精-阴道" value="冻精-阴道" />
                            <el-option label="冻精-子宫角" value="冻精-子宫角" />
                            <el-option label="模糊本交" value="模糊本交" />
                            <el-option label="精准本交" value="精准本交" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="种母发情类型" prop="ewematingEstrus">
                        <el-select v-model="editForm.ewematingEstrus" placeholder="请选择发情类型">
                            <el-option label="自然交配" value="自然交配" />
                            <el-option label="人工授精" value="人工授精" />
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="首配评分" prop="ewematingRating">
                        <el-select v-model="editForm.ewematingRating" placeholder="请选择评分">
                            <el-option label="1分" value="1" />
                            <el-option label="2分" value="2" />
                            <el-option label="3分" value="3" />
                            <el-option label="4分" value="4" />
                            <el-option label="5分" value="5" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="当前栋舍" prop="ewePoultryhouse">
                        <el-select v-model="editForm.ewePoultryhouse" placeholder="请选择栋舍">
                            <el-option label="大羊舍" value="大羊舍" />
                            <el-option label="配种舍" value="配种舍" />
                            <el-option label="采购羊栋舍" value="采购羊栋舍" />
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="当前栏位" prop="ewematingField">
                        <el-input v-model="editForm.ewematingField" placeholder="请输入栏位" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="转入栋舍" prop="eweTransferhouse">
                        <el-select v-model="editForm.eweTransferhouse" placeholder="请选择转入栋舍">
                            <el-option label="大羊舍" value="大羊舍" />
                            <el-option label="配种舍" value="配种舍" />
                            <el-option label="采购羊栋舍" value="采购羊栋舍" />
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="转入栏位" prop="ewematingTransfer">
                        <el-input v-model="editForm.ewematingTransfer" placeholder="请输入转入栏位" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="繁殖状态" prop="reproductiveStatus">
                        <el-select v-model="editForm.reproductiveStatus" placeholder="请选择繁殖状态">
                            <el-option :label="'已怀孕'" :value="true" />
                            <el-option :label="'未怀孕'" :value="false" />
                            <el-option :label="'已怀孕'" :value="true" />
                            <el-option :label="'未怀孕'" :value="false" />
                            <el-option :label="'已怀孕'" :value="true" />
                            <el-option :label="'未怀孕'" :value="false" />
                            <el-option :label="'已怀孕'" :value="true" />
                            <el-option :label="'未怀孕'" :value="false" />
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="事件日期" prop="ewematingDateTime">
                        <el-date-picker v-model="editForm.ewematingDateTime" type="date" placeholder="选择日期"
                            format="YYYY/MM/DD" value-format="YYYY/MM/DD" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="重量(公斤)" prop="ewematingWeight">
                        <el-input-number v-model="editForm.ewematingWeight" :min="0" :max="200" :precision="2"
                            controls-position="right" />
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row>
                <el-col :span="24">
                    <el-form-item label="备注" prop="remarks">
                        <el-input v-model="editForm.remarks" type="textarea" :rows="3" placeholder="请输入备注" />
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>

        <template #footer>
            <span class="dialog-footer">
                <el-button @click="editDialogVisible = false">取消</el-button>
                <el-button type="primary" @click="handleEditConfirm" :loading="editLoading">
                    确定
                </el-button>
            </span>
        </template>
    </el-dialog>

    <!-- 批量修改弹窗 -->
    <el-dialog v-model="batchEditDialogVisible" title="批量修改配种记录" width="900px" :close-on-click-modal="false"
        :close-on-press-escape="false">

        <div class="batch-edit-info">
            <p><strong>已选择 {{ selectedRows.length }} 条记录进行修改</strong></p>
        </div>

        <el-form :model="batchEditForm" :rules="batchEditRules" ref="batchEditFormRef" label-width="120px">
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="配种方式" prop="ewematingMethod">
                        <el-select v-model="batchEditForm.ewematingMethod" placeholder="请选择配种方式">
                            <el-option label="鲜精-阴道" value="鲜精-阴道" />
                            <el-option label="鲜精-子宫角" value="鲜精-子宫角" />
                            <el-option label="冻精-阴道" value="冻精-阴道" />
                            <el-option label="冻精-子宫角" value="冻精-子宫角" />
                            <el-option label="模糊本交" value="模糊本交" />
                            <el-option label="精准本交" value="精准本交" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="种母发情类型" prop="ewematingEstrus">
                        <el-select v-model="batchEditForm.ewematingEstrus" placeholder="请选择发情类型">
                            <el-option label="自然交配" value="自然交配" />
                            <el-option label="人工授精" value="人工授精" />
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="首配评分" prop="ewematingRating">
                        <el-select v-model="batchEditForm.ewematingRating" placeholder="请选择评分">
                            <el-option label="1分" value="1" />
                            <el-option label="2分" value="2" />
                            <el-option label="3分" value="3" />
                            <el-option label="4分" value="4" />
                            <el-option label="5分" value="5" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="当前栋舍" prop="ewePoultryhouse">
                        <el-select v-model="batchEditForm.ewePoultryhouse" placeholder="请选择栋舍">
                            <el-option label="大羊舍" value="大羊舍" />
                            <el-option label="配种舍" value="配种舍" />
                            <el-option label="采购羊栋舍" value="采购羊栋舍" />
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="转入栋舍" prop="eweTransferhouse">
                        <el-select v-model="batchEditForm.eweTransferhouse" placeholder="请选择转入栋舍">
                            <el-option label="大羊舍" value="大羊舍" />
                            <el-option label="配种舍" value="配种舍" />
                            <el-option label="采购羊栋舍" value="采购羊栋舍" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="繁殖状态" prop="reproductiveStatus">
                        <el-select v-model="batchEditForm.reproductiveStatus" placeholder="请选择繁殖状态">
                            <el-option :label="'已怀孕'" :value="true" />
                            <el-option :label="'未怀孕'" :value="false" />
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="重量(公斤)" prop="ewematingWeight">
                        <el-input-number v-model="batchEditForm.ewematingWeight" :min="0" :max="200" :precision="2"
                            controls-position="right" placeholder="不修改则留空" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="备注" prop="remarks">
                        <el-input v-model="batchEditForm.remarks" placeholder="请输入备注" />
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>


    </el-dialog>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, computed } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
    Plus,
    Delete,
    User,
    Search,
    Refresh,
    Setting,
    Filter,
    More,
    InfoFilled
} from '@element-plus/icons-vue'
import { Reads, Writes } from '@/Utils/axiosHelper';
import { useRouter } from 'vue-router'
import { watch } from 'vue';

const router = useRouter();

const tableData = ref([])
const selectedRows = ref<any[]>([])

// 表格选择变化处理
const handleSelectionChange = (selection: any[]) => {
    selectedRows.value = selection
}

// 编辑对话框相关
const editDialogVisible = ref(false)
const editLoading = ref(false)
const editFormRef = ref()
const editForm = reactive({
    ewematingId: 0,
    ewematingSnowId: '',
    ewematingFirstpair: '',
    ewematingMethod: '',
    ewematingEstrus: '',
    ewematingRating: '',
    ewePoultryhouse: '',
    ewematingField: '',
    eweTransferhouse: '',
    ewematingTransfer: '',
    reproductiveStatus: true,
    ewematingDateTime: '',
    ewematingWeight: 0,
    remarks: ''
})

// 批量编辑对话框相关
const batchEditDialogVisible = ref(false)
const batchEditLoading = ref(false)
const batchEditFormRef = ref()
const batchEditForm = reactive({
    ewematingMethod: '',
    ewematingEstrus: '',
    ewematingRating: '',
    ewePoultryhouse: '',
    eweTransferhouse: '',
    reproductiveStatus: true,
    ewematingWeight: undefined as number | undefined,
    remarks: ''
})

// 表单验证规则
const editRules = {
    ewematingSnowId: [
        { required: true, message: '请输入耳号', trigger: 'blur' }
    ],
    ewematingFirstpair: [
        { required: true, message: '请输入首配公羊', trigger: 'blur' }
    ],
    ewematingMethod: [
        { required: true, message: '请选择配种方式', trigger: 'change' }
    ],
    ewematingEstrus: [
        { required: true, message: '请选择种母发情类型', trigger: 'change' }
    ]
}

const batchEditRules = {
    ewematingMethod: [
        { required: true, message: '请选择配种方式', trigger: 'change' }
    ],
    ewematingEstrus: [
        { required: true, message: '请选择种母发情类型', trigger: 'change' }
    ]
}

const page = reactive({
    pageIndex: 1,
    pageSize: 5,
    totalCount: 0,
    totalPage: 0,
    StartEwematingTime: "",
    EndEwematingTime: "",
    EwematingSnowId: "",
    ResponsibleFor: ""
})

const loadData = async () => {
    try {
        console.log('加载数据，查询参数:', page)
        const res = await Reads.get("Management/GetEwematings", {
            params: page
        })

        if (res.data.code === 400) {
            tableData.value = res.data.data.data || []
            page.totalCount = res.data.data.totalCount || 0
            page.totalPage = res.data.data.totalPage || 0
            console.log('数据加载成功，共', tableData.value.length, '条记录')
        } else {
            ElMessage.error(res.data.msg || '查询失败')
        }
    } catch (error) {
        console.error('加载数据失败:', error)
        ElMessage.error('查询失败，请检查网络连接')
    }
}

onMounted(() => {
    loadData()
})
// 只监听分页参数变化，避免与搜索条件互相触发
watch(() => [page.pageIndex, page.pageSize], () => {
    if (page.pageIndex > 0 && page.pageSize > 0) {
        loadData()
    }
})

// 搜索处理
const handleSearch = () => {
    page.pageIndex = 1  // 搜索时重置到第一页
    loadData()
}

// 重置处理
const handleReset = () => {
    Object.assign(page, {
        StartEwematingTime: "",
        EndEwematingTime: "",
        EwematingSnowId: "",
        ResponsibleFor: ""
    })
    // 注意：不需要手动调用 loadData()，因为 watch 会监听到 pageIndex 的变化并自动触发
}

// 新增处理
const handleAddNew = () => {
    router.push('/Ewemating')
}

// 批量删除处理
// const handleBatchDelete = () => {
//     if (selectedRows.value.length === 0) {
//         ElMessage.warning('请选择要删除的记录')
//         return
//     }

//     ElMessageBox.confirm(
//         `确定要删除选中的 ${selectedRows.value.length} 条记录吗？`,
//         '提示',
//         {
//             confirmButtonText: '确定',
//             cancelButtonText: '取消',
//             type: 'warning'
//         }
//     ).then(async () => {
//         try {
//             // 调用批量删除API
//             const ids = selectedRows.value.map(row => row.ewematingId)
//             await Writes.delete('Management/DeleteBatchEwemating', { data: { ids } })

//             ElMessage.success('批量删除成功')
//             selectedRows.value = []
//             loadData()
//         } catch (error) {
//             ElMessage.error('批量删除失败')
//             console.error('Batch delete error:', error)
//         }
//     }).catch(() => {
//         // 用户取消
//     })
// }

// 批量修改处理
const handleBatchUpdate = () => {
    if (selectedRows.value.length === 0) {
        ElMessage.warning('请选择要修改的记录')
        return
    }

    // 重置批量修改表单
    Object.assign(batchEditForm, {
        ewematingMethod: '',
        ewematingEstrus: '',
        ewematingRating: '',
        ewePoultryhouse: '',
        eweTransferhouse: '',
        reproductiveStatus: true,
        ewematingWeight: undefined,
        remarks: ''
    })

    batchEditDialogVisible.value = true
}


// // 批量审核处理
// const handleBatchReview = () => {
//     if (selectedRows.value.length === 0) {
//         ElMessage.warning('请选择要审核的记录')
//         return
//     }

//     ElMessageBox.confirm(
//         `确定要审核选中的 ${selectedRows.value.length} 条记录吗？`,
//         '提示',
//         {
//             confirmButtonText: '确定',
//             cancelButtonText: '取消',
//             type: 'warning'
//         }
//     ).then(async () => {
//         try {
//             Writes.put('/api/mating-records/batch-review', {
//                 ids: selectedRows.value.map(row => row.id)
//             })

//             ElMessage.success('审核成功')
//             selectedRows.value = []
//             loadData()
//         } catch (error) {
//             ElMessage.error('审核失败')
//             console.error('Review error:', error)
//         }
//     }).catch(() => {
//         // 用户取消
//     })
// }

// 编辑处理
const handleEdit = (row: any) => {
    router.push(`/Ewemating/${row.ewematingId}`)
}

// 修改处理 - 弹窗编辑
const handleUpdate = (row: any) => {
    console.log('Update:', row)

    // 填充编辑表单
    Object.assign(editForm, {
        ewematingId: row.ewematingId,
        ewematingSnowId: row.ewematingSnowId || '',
        ewematingFirstpair: row.ewematingFirstpair || '',
        ewematingMethod: row.ewematingMethod || '',
        ewematingEstrus: row.ewematingEstrus || '',
        ewematingRating: row.ewematingRating || '',
        ewePoultryhouse: row.ewePoultryhouse || '',
        ewematingField: row.ewematingField || '',
        eweTransferhouse: row.eweTransferhouse || '',
        ewematingTransfer: row.ewematingTransfer || '',
        reproductiveStatus: row.reproductiveStatus !== undefined ? row.reproductiveStatus : true,
        ewematingDateTime: row.ewematingDateTime || '',
        ewematingWeight: row.ewematingWeight || 0,
        remarks: row.remarks || ''
    })

    editDialogVisible.value = true
}

// 确认修改
const handleEditConfirm = async () => {
    if (!editFormRef.value) return

    try {
        await editFormRef.value.validate()

        editLoading.value = true

        // 调用更新API - 格式化数据
        const updatePayload = {
            ewematingId: editForm.ewematingId,
            ewematingFirstpair: editForm.ewematingFirstpair,
            ewematingMethod: editForm.ewematingMethod,
            ewematingEstrus: editForm.ewematingEstrus,
            ewematingRating: editForm.ewematingRating,
            ewePoultryhouse: editForm.ewePoultryhouse,
            ewematingField: editForm.ewematingField,
            eweTransferhouse: editForm.eweTransferhouse,
            ewematingTransfer: editForm.ewematingTransfer,
            reproductiveStatus: editForm.reproductiveStatus,
            ewematingDateTime: editForm.ewematingDateTime || null, // 确保日期格式正确
            ewematingWeight: editForm.ewematingWeight,
            remarks: editForm.remarks
        }

        console.log('更新配种数据:', updatePayload)

        const response = await Writes.put('Management/UpdateEwemating', updatePayload)

        if (response.data.code == 300) {
            ElMessage.success(response.data.msg || '修改成功')
            editDialogVisible.value = false
            loadData() // 重新加载数据
        } else {
            ElMessage.error(response.data.msg || '修改失败')
        }
    } catch (error) {
        console.error('修改失败:', error)
        ElMessage.error('修改失败，请检查输入信息')
    } finally {
        editLoading.value = false
    }
}

// 删除处理
const handleDelete = (row: any) => {
    console.log('Delete:', row.ewematingId)
    ElMessageBox.confirm(
        '确认删除吗?',
        '警告',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'error',
        }
    )
        .then(() => {
            Writes.delete("Management/DeleteEwemating?EwematingId=" + row.ewematingId)
                .then(res => {
                    if (res.data.code == 200) {
                        ElMessage.success('删除成功')
                        loadData()
                    }
                    else {
                        ElMessage.error('删除失败')
                    }
                })
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: 'Delete canceled',
            })
        })
}

// 刷新处理
const handleRefresh = () => {
    loadData()
}

// 设置处理
const handleSettings = () => {
    ElMessage.info('打开设置')
}

// 筛选处理
const handleFilter = () => {
    ElMessage.info('打开筛选')
}

// 更多操作处理
const handleMore = () => {
    ElMessage.info('更多操作')
}

// 工具函数
const formatDate = (dateStr: string): string => {
    if (!dateStr) return '-'
    return dateStr
}

const getMatingMethodText = (method: string): string => {
    const methodMap: { [key: string]: string } = {
        '鲜精-阴道': '鲜精-阴道',
        '鲜精-子宫角': '鲜精-子宫角',
        '冻精-阴道': '冻精-阴道',
        '冻精-子宫角': '冻精-子宫角',
        '模糊本交': '模糊本交',
        '精准本交': '精准本交',
        'natural': '自然交配',
        'artificial': '人工授精'
    }
    return methodMap[method] || method || '-'
}

const getEstrusTypeText = (type: string): string => {
    const typeMap: { [key: string]: string } = {
        '自然交配': '自然交配',
        '人工授精': '人工授精',
        'primary': '初次发情',
        'repeat': '重复发情'
    }
    return typeMap[type] || type || '-'
}
</script>

<style scoped>
.ewe-mating-list-view {
    padding: 20px;
    background-color: #f5f5f5;
    min-height: 100vh;
}

/* 搜索区域 */
.search-section {
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
}

.search-row {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.search-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 200px;
}

.search-item label {
    font-weight: 500;
    color: #333;
    font-size: 14px;
}

.date-range {
    display: flex;
    align-items: center;
    gap: 8px;
}

.date-separator {
    color: #666;
    font-size: 14px;
}

.search-actions {
    display: flex;
    gap: 10px;
    margin-left: auto;
}

/* 工具栏区域 */
.toolbar-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: white;
    padding: 15px 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
}

.toolbar-left {
    display: flex;
    align-items: center;
    gap: 15px;
}

.selection-info {
    display: flex;
    align-items: center;
    gap: 5px;
    color: #666;
    font-size: 14px;
}

.info-icon {
    color: #f56c6c;
    font-size: 16px;
}

.toolbar-right {
    display: flex;
    gap: 15px;
}

.toolbar-icon {
    font-size: 18px;
    color: #666;
    cursor: pointer;
    transition: color 0.3s;
}

.toolbar-icon:hover {
    color: #409eff;
}

/* 多表格区域 */
.multi-table-section {
    display: flex;
    flex-direction: column;
    gap: 20px;
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
}

.table-container {
    margin-bottom: 20px;
}

.table-container:last-child {
    margin-bottom: 0;
}

.column-header {
    display: flex;
    align-items: center;
    gap: 5px;
}

.filter-icon {
    font-size: 12px;
    color: #999;
}

/* 分页区域 */
.pagination-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: white;
    padding: 15px 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.page-size-control {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #666;
    font-size: 14px;
}

.pagination-info {
    display: flex;
    align-items: center;
    gap: 15px;
    color: #666;
    font-size: 14px;
}

/* 表格样式优化 */
:deep(.el-table) {
    border-radius: 8px;
    overflow: hidden;
}

:deep(.el-table th) {
    background-color: #f8f9fa;
    color: #333;
    font-weight: 600;
}

:deep(.el-table td) {
    padding: 8px 0;
}

:deep(.el-table .el-table__empty-text) {
    color: #999;
    font-size: 14px;
}

/* 按钮样式 */
:deep(.el-button--primary) {
    background-color: #f56c6c;
    border-color: #f56c6c;
}

:deep(.el-button--primary:hover) {
    background-color: #f78989;
    border-color: #f78989;
}

:deep(.el-button--danger) {
    background-color: #ff9ff3;
    border-color: #ff9ff3;
}

:deep(.el-button--danger:hover) {
    background-color: #ffb3f7;
    border-color: #ffb3f7;
}

:deep(.el-button--warning) {
    background-color: #ff9ff3;
    border-color: #ff9ff3;
}

:deep(.el-button--warning:hover) {
    background-color: #ffb3f7;
    border-color: #ffb3f7;
}

/* 分页样式 */
:deep(.el-pagination .el-pager li.active) {
    background-color: #f56c6c;
    color: white;
}

:deep(.el-pagination .el-pager li:hover) {
    color: #f56c6c;
}

/* 选择器样式 */
:deep(.el-select .el-input.is-focus .el-input__wrapper) {
    box-shadow: 0 0 0 1px #f56c6c inset;
}

/* 弹窗样式 */
:deep(.el-dialog) {
    border-radius: 8px;
}

:deep(.el-dialog__header) {
    background-color: #f8f9fa;
    border-radius: 8px 8px 0 0;
    padding: 15px 20px;
}

:deep(.el-dialog__body) {
    padding: 20px;
}

:deep(.el-form-item__label) {
    font-weight: 600;
    color: #333;
}

:deep(.el-input__wrapper) {
    border-radius: 6px;
}

:deep(.el-select .el-input__wrapper) {
    border-radius: 6px;
}

/* 批量修改弹窗样式 */
.batch-edit-info {
    background-color: #f0f9ff;
    border: 1px solid #0ea5e9;
    border-radius: 6px;
    padding: 12px 16px;
    margin-bottom: 20px;
}

.batch-edit-info p {
    margin: 0;
    color: #0c4a6e;
    font-weight: 500;
}

:deep(.el-input-number .el-input__inner) {
    text-align: center;
}

/* 按钮样式优化 */
:deep(.el-button--success) {
    background-color: #67c23a;
    border-color: #67c23a;
}

:deep(.el-button--success:hover) {
    background-color: #85ce61;
    border-color: #85ce61;
}

/* 响应式设计 */
@media (max-width: 1200px) {
    .search-row {
        flex-direction: column;
        align-items: stretch;
    }

    .search-item {
        min-width: 100%;
    }

    .search-actions {
        margin-left: 0;
        justify-content: center;
    }
}

@media (max-width: 768px) {
    .ewe-mating-list-view {
        padding: 10px;
    }

    .toolbar-section {
        flex-direction: column;
        gap: 15px;
        align-items: stretch;
    }

    .toolbar-left {
        justify-content: center;
        flex-wrap: wrap;
    }

    .toolbar-right {
        justify-content: center;
    }

    .pagination-section {
        flex-direction: column;
        gap: 15px;
        align-items: center;
    }

    .pagination-info {
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }

    /* 弹窗响应式 */
    :deep(.el-dialog) {
        width: 95% !important;
        margin: 10px auto;
    }

    :deep(.el-row) {
        margin-bottom: 10px;
    }

    :deep(.el-col) {
        margin-bottom: 15px;
    }
}
</style>
